<template>
  <div class="new-project">
    <el-form
      ref="projectBaseRef"
      :rules="projectBaseRule"
      label-position="left"
      :model="projectBase"
      label-width="200px"
      class="textarea"
    >
      <el-form-item label="项目名称：" prop="name" required>
        <el-input v-model="projectBase.name"></el-input>
      </el-form-item>
      <template v-if="defaultUrl">
        <el-checkbox
          v-model="disableInputUrl"
          style="float: left; margin-bottom: 10px"
          @change="changeCheck_input"
          >是否使用默认路径</el-checkbox
        >
        <div style="clear: both"></div>
      </template>
      <el-form-item label="存储路径：" prop="inputUrl">
        <el-input v-model="projectBase.inputUrl" :disabled="disableInputUrl">
          <template #append>
            <el-button
              :icon="FolderOpened"
              @click="getFileUrl_input"
              :disabled="disableInputUrl"
            ></el-button>
          </template>
        </el-input>
      </el-form-item>
      <template v-if="defaultUrl">
        <el-checkbox
          v-model="disableOutputUrl"
          style="float: left; margin-bottom: 10px"
          @change="changeCheck_output"
          >是否使用默认路径</el-checkbox
        >
        <div style="clear: both"></div>
      </template>
      <el-form-item label="默认生成路径：" prop="outputUrl">
        <el-input v-model="projectBase.outputUrl" :disabled="disableOutputUrl">
          <template #append>
            <el-button
              :icon="FolderOpened"
              @click="getFileUrl_output"
              :disabled="disableOutputUrl"
            ></el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="AUTOSAR版本号：" prop="arVersion">
        <el-select v-model="projectBase.arVersion" placeholder="请选择">
          <el-option
            v-for="item in arVersions"
            :key="item?.name"
            :label="item?.name"
            :value="item?.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useStore } from '@/render/store/index'
import type { FormInstance, FormRules } from 'element-plus'
import { FolderOpened } from '@element-plus/icons-vue'
const { dialog } = require('electron').remote

export default defineComponent({
  emits: ['getProjectBase'],
  setup(props, { emit }) {
    const formData = reactive({
      defaultUrl: 'F:\\系统演示\\工程文件',
      disableInputUrl: true,
      disableOutputUrl: true,
      arVersions: null,
      projectBase: {
        name: '',
        inputUrl: '',
        outputUrl: '',
        arVersion: ''
      }
    })
    const projectBaseRef = ref<FormInstance>()
    const store = useStore()
    const state = store.state.projects

    const checkProjectName = (rule: any, value: string, callback: any) => {
      if (!value) {
        callback(new Error('请输入工程名称'))
      } else if (hasProject(value)) {
        callback(new Error('该工程名称已存在'))
      } else {
        callback()
      }
    }
    const hasProject = (projectName: string): boolean => {
      if (state.projectNames && state.projectNames.has(projectName)) {
        return true
      } else {
        return false
      }
    }
    const projectBaseRule = reactive<FormRules>({
      name: { validator: checkProjectName, trigger: 'blur' },
      inputUrl: { required: true, message: '请输入存储路径', trigger: 'blur' },
      outputUrl: { required: true, message: '请输入输出路径', trigger: 'blur' },
      arVersion: {
        required: false,
        message: '请输入AUTOSAR版本号',
        trigger: 'blur'
      }
    })

    const changeCheck_input = () => {
      if (formData.disableInputUrl) {
        formData.projectBase.inputUrl = formData.defaultUrl
      }
    }
    const changeCheck_output = () => {
      if (formData.disableOutputUrl) {
        formData.projectBase.outputUrl = formData.defaultUrl
      }
    }
    const getFileUrl_input = () => {
      dialog
        .showOpenDialog({
          properties: ['openFile', 'openDirectory']
        })
        .then((result) => {
          formData.projectBase.inputUrl = result.filePaths[0]
        })
        .catch((err) => {
          console.log(err)
        })
    }
    const getFileUrl_output = () => {
      dialog
        .showOpenDialog({
          properties: ['openFile', 'openDirectory']
        })
        .then((result) => {
          formData.projectBase.outputUrl = result.filePaths[0]
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const submitProjectBase = () => {
      emit('getProjectBase', formData.projectBase)
    }

    const reset = () => {
      formData.projectBase = {
        name: '',
        inputUrl: '',
        outputUrl: '',
        arVersion: ''
      }
    }
    onMounted(() => {
      store.dispatch('env/loadAllArVersions').then((res) => {
        formData.arVersions = res
      })
    })

    watch(
      () => formData.projectBase.name,
      (n) => {
        if (n) {
          formData.projectBase.inputUrl = `${formData.defaultUrl}\\${n}`
          formData.projectBase.outputUrl = `${formData.defaultUrl}\\${n}\\output`
        }
      }
    )

    return {
      projectBaseRef,
      projectBaseRule,
      FolderOpened,
      ...toRefs(formData),
      submitProjectBase,
      reset,
      changeCheck_input,
      changeCheck_output,
      getFileUrl_input,
      getFileUrl_output
    }
  }
})
</script>

<style scoped lang="less">
@import '../../../assets/style/index';
.new-project {
  padding: 20px;
  border: @content-border-style;
  border-radius: 4px;
}
</style>
